@charset "utf-8";
.collapse{ border: 1px solid #dddee1; border-radius: 3px;
  .collapse-panel{ border-top: 1px solid #dddee1;
    &:first-child{ border-top: 0; }
    &.active{
      .collapse-title:before{ transform: rotate(90deg); }
    }
  }
  .collapse-title{ height: 38px; line-height: 38px; color: #666; cursor: pointer; position: relative; background: #f7f7f7;
    &:before{ content: ''; display: inline-block; border: 5px solid transparent; border-left-color: #666; margin-left: 10px; transition: all .3s; }
  }
  .collapse-content{ padding: 5px 10px; overflow: hidden; transform-origin: center top;
    &.active{ }
  }
}
.collapse-enter-active{ animation: collapseEnter .3s }
.collapse-leave-active{ animation: collapseLeave .3s }
@keyframes collapseEnter{
  0%{ opacity: 0; transform: scaleY(0); }
  100%{ opacity: 1; transform: scaleY(1); }
}
@keyframes collapseLeave{
  0%{ opacity: 1; transform: scaleY(1); }
  100%{ opacity: 0; transform: scaleY(0);display: none }
}